<template>
  <master title="答题">
    <el-row style="width: 90%;padding-left: 50px">
      <el-input v-model="userId" style="width: 200px;float: left;margin-top: 20px" placeholder="请输入学号"></el-input>
    </el-row>
    <el-row style="width: 90%;padding: 50px">

      <!-- 左侧当前题目 -->
      <el-col :span="16" >
        <div class="question-container">
          <h3>{{currentQuestionIndex+1}}、{{ currentQuestion.title }}</h3>
          <div v-if="currentQuestion.type === 'single'">
            <el-radio-group v-model="currentAnswer" @change="onAnswerChange">
              <el-radio style="width: 100%;margin-top: 10px;"
                        v-for="(option, index) in currentQuestion.options"
                        :key="index"
                        :label="option"
              >
                {{ option }}
              </el-radio>
            </el-radio-group>
          </div>
          <div v-if="currentQuestion.type === 'multiple'">


            <el-checkbox-group v-model="currentAnswer" @change="onAnswerChange">
              <el-checkbox
                      v-for="(option, index) in currentQuestion.options"
                      :key="index"
                      :label="option"
              >
                {{ option }}
              </el-checkbox>
            </el-checkbox-group>
          </div>



          <div v-if="currentQuestion.type === 'short_answer'">

            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="currentAnswer" @change="onAnswerChange">
            </el-input>


          </div>




        </div>
      </el-col>

      <!-- 右侧题目号 -->
      <el-col :span="6" style="margin-left: 30px">
        <div class="question-nav">
          <!-- 使用 grid 布局显示题目编号，每行 5 个 -->
          <div class="question-grid">
            <el-button style="margin-top: 8px;"
                    v-for="(question, index) in questions"
                    :key="index"
                    :class="{
                      'answered': question.answered,
                      'current': currentQuestionIndex === index
                    }"
                    @click="goToQuestion(index)"
            >
              {{ index + 1 }} <!-- 显示题号 -->
            </el-button>
          </div>
        </div>

        <!-- 导航按钮 -->
        <div class="navigation-buttons" style="margin-top: 15px;">
          <el-button @click="previousQuestion" :disabled="currentQuestionIndex === 0">
            上一题
          </el-button>
          <el-button @click="nextQuestion" :disabled="currentQuestionIndex === questions.length - 1">
            下一题
          </el-button>
          <el-button
                  @click="submit"
                  :disabled="isSubmitDisabled"
                  type="primary"
          >
            提交
          </el-button>
        </div>
      </el-col>
    </el-row>
  </master>
</template>
<script type="text/javascript">
(function (G) {
G.vue({
  "usingComponents": {///引入组件
    "master": "/components/Master/Master"///母版组件
  },
  "enablePullDownRefresh": true
},{
  data:{
    // 题库数据
    questions: [
      /*{ title: "问题 1: 选择正确的选项", type: "single", options: ["A、选择正确的选项", "B、选择正确的选项", "C、选择正确的选项", "D、选择正确的选项"], answered: false, answer: null },
      { title: "问题 2: 选择多个选项", type: "multiple", options: ["A", "B", "C", "D"], answered: false, answer: [] },
      { title: "问题 3: 选择正确的选项", type: "single", options: ["A", "B", "C", "D"], answered: false, answer: null },
      { title: "问题 4: 选择多个选项", type: "multiple", options: ["A", "B", "C", "D"], answered: false, answer: [] },
      { title: "问题 5: 选择正确的选项", type: "single", options: ["A", "B", "C", "D"], answered: false, answer: null },
      { title: "问题 6: 选择多个选项", type: "multiple", options: ["A", "B", "C", "D"], answered: false, answer: [] },
      { title: "问题 7: 选择正确的选项", type: "single", options: ["A", "B", "C", "D"], answered: false, answer: null },
      { title: "问题 8: 选择多个选项", type: "multiple", options: ["A", "B", "C", "D"], answered: false, answer: [] },
      { title: "问题 9: 选择正确的选项", type: "single", options: ["A", "B", "C", "D"], answered: false, answer: null },
      { title: "问题 10: 选择多个选项", type: "multiple", options: ["A", "B", "C", "D"], answered: false, answer: [] },*/
    ],
    currentQuestionIndex: 0, // 当前题目索引
    currentAnswer: [], // 当前题目的答案
    practiceId:'',
    userId:''
  },
  methods:{
// 跳转到指定题目
    goToQuestion(index) {
      this.currentQuestionIndex = index;
      const currentQuestion = this.questions[index];

      // 如果题目已答过，恢复答案
      if (currentQuestion.answered) {
        this.currentAnswer = Array.isArray(currentQuestion.answer) ? [...currentQuestion.answer] : currentQuestion.answer;
      } else {
        // 否则，不显示任何答案（保持空白状态）
        this.currentAnswer = Array.isArray(currentQuestion.answer) ? [] : null;
      }
    },
    // 下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.autoSaveAnswer(); // 自动保存答案
        this.currentQuestionIndex++; // 跳转到下一题
        this.restoreAnswerIfNeeded(); // 恢复下一个题目的答案（如果有）
      }
    },
    // 上一题
    previousQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.autoSaveAnswer(); // 自动保存答案
        this.currentQuestionIndex--; // 跳转到上一题
        this.restoreAnswerIfNeeded(); // 恢复上一个题目的答案（如果有）
      }
    },
    // 自动保存答案
    autoSaveAnswer() {
      const currentQuestion = this.questions[this.currentQuestionIndex];
      // 只有在当前题目有答案时才保存
      if (this.currentAnswer !== null && this.currentAnswer.length > 0) {
        currentQuestion.answer = this.currentAnswer; // 保存答案
        currentQuestion.answered = true; // 标记为已答
      }
    },
    // 恢复答案，如果已经答过
    restoreAnswerIfNeeded() {
      const currentQuestion = this.questions[this.currentQuestionIndex];
      if (currentQuestion.answered) {
        this.currentAnswer = Array.isArray(currentQuestion.answer) ? [...currentQuestion.answer] : currentQuestion.answer;
      } else {
        this.currentAnswer = Array.isArray(currentQuestion.answer) ? [] : null;
      }
    },
    // 回答选项变化时，自动保存
    onAnswerChange() {
      this.autoSaveAnswer();
      // 移除自动跳转的逻辑，完全由用户控制
    },
    getList() {
     /* practiceInfo(this.practiceId).then(response => {
        this.questions = response.data;
      });*/

      G.get('{JAVAURL}/sp-practice/practiceInfo', {practiceId:this.practiceId}).then((res) => {

        this.questions = res.data.topicList;
        //this.drawer = false;
      });
    },
    // 提交答案
    submit() {
      if (this.isSubmitDisabled) {
        this.$message.warning("请完成所有题目后再提交！");
      } else {
        if (!this.userId){
          this.$message({
            message: '请输入学号',
            type: 'warning'
          });
          return;
        }

        var params={
          userId:this.userId,
          list:this.questions
        }
        G.post('{JAVAURL}/sp-practice/practiceAnswer', params).then((res) => {
          G.$go('/pages/practice/list')

        });

      }
    }
  },
  computed: {
    // 获取当前显示的题目
    currentQuestion() {
      return this.questions[this.currentQuestionIndex];
    },
    // 是否禁用提交按钮
    isSubmitDisabled() {
      // 如果有任何题目未答，则禁用提交按钮
      return this.questions.some(question => !question.answered);
    }
  },
  mounted(query) {
    const practiceId = query.practiceId;
    console.log("practiceId:",practiceId);
    this.practiceId = practiceId;
    this.getList();
  }
});
})(Y)
</script>
<style scoped>

</style>
